<template>
  <view
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 90%;
      height: 100%;
    "
  >
    <wd-form ref="form" :model="model" style="width: 100%">
      <wd-cell-group border>
        <wd-input
          v-model="model.value1"
          style="margin: 25rpx 0"
          label-width="100px"
          prop="value1"
          clearable
          placeholder="请输入手机号"
          :rules="[
            { required: true, message: '请填写手机号' },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: '手机号格式错误',
              required: false,
            },
          ]"
        />
        <view style="display: flex; align-items: center">
          <wd-input
            v-model="model.value3"
            class="mb-15rpx w-[90%]"
            label-width="100px"
            prop="value3"
            clearable
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          />
          <wd-button
            type="info"
            size="small"
            :disabled="aaaaa"
            @click="(countdownInfo.isDisabled = true), countdown(), setTokem()"
          >
            {{
              countdownInfo.isDisabled
                ? countdownInfo.second + "秒后重试"
                : countdownInfo.buttonName
            }}
          </wd-button>
        </view>
      </wd-cell-group>
    </wd-form>
    <view class="w-[100%]">
      <wd-checkbox v-model="loginValue.okZC2" checked-color="#45d4bf" disabled @click="tzMzsm">
        我已同意
        <text color="#00c8ab">优医协议</text>
      </wd-checkbox>
    </view>
    <wd-button
      class="w-[100%]"
      type="success"
      custom-class="custom-shadow"
      :disabled="loginValue.okZC2 ? false : true"
      @click="zhuce"
    >
      登录
    </wd-button>
    <text color="#00cc99" @click="loginValue.qhCart">密码登录</text>
  </view>
</template>

<script setup lang="ts">
import { LoginPinia } from "@/store/modules/Login";
import { useToast } from "wot-design-uni";
const a = ref("");
const loginValue = LoginPinia();
const { success: showSuccess } = useToast();

const model = reactive<{
  value1: string;
  value3: string;
}>({
  value1: "",
  value3: "",
});

const form = ref();

function tzMzsm() {
  uni.navigateTo({ url: "/pages/Agreement/index?cac=1" });
}

function zhuce() {
  form.value
    .validate()
    .then(({ valid }) => {
      if (valid) {
        if (model.value3 == localStorage.getItem("token")) {
          console.log("登录成功");
          uni.switchTab({ url: "/pages/home/index" });
        }
      }
    })
    .catch((error: any) => {
      console.log(error, "error");
    });
}
function setTokem() {
  localStorage.setItem("token", "1234");
}
// 倒计时信息
const countdownInfo = ref({
  second: 60, // 倒计时秒数
  buttonName: "获取验证码", // 按钮名称
  isDisabled: false, // 按钮是否有效，默认有效
});

// 定义倒计时函数
const countdown = () => {
  countdownInfo.value.isDisabled = true; // 按钮无效
  let interval = window.setInterval(() => {
    countdownInfo.value.buttonName = countdownInfo.value.second + "秒后重新获取"; // 重新设置按钮名称
    countdownInfo.value.second -= 1; // 倒计时减1
    if (countdownInfo.value.second <= 0) {
      countdownInfo.value.buttonName = "获取验证码";
      countdownInfo.value.second = 60;
      countdownInfo.value.isDisabled = false;
      window.clearInterval(interval);
    }
  }, 1000); // 每秒执行一次
};

// 监听对象，数据是否发生改变，改变就进行重新保存
watch(
  countdownInfo,
  (newValue) => {
    if (!newValue.isDisabled) {
      localStorage.clear();
    }
    const JSONSTR = JSON.stringify(newValue); // 将对象转为字符串
    localStorage.setItem("countdownInfo", JSONSTR); // 将其保存到localStorage中
  },
  {
    deep: true, // 深度监听
  }
);

const aaaaa = ref(true);
function isValidPhoneNumber(phoneNumber: any) {
  const regex = /^1[3-9]\d{9}$/;
  return regex.test(phoneNumber);
}

watchEffect(() => {
  if (isValidPhoneNumber(model.value1)) {
    aaaaa.value = false;
  } else {
    aaaaa.value = true;
  }
});
</script>

<style setup lang="scss"></style>
